import QtQuick 2.0
import "content"
import CustomComponents 1.0

// This example illustrates expanding a list item to show a more detailed view.

Rectangle {
    property int w_details: 200
    property int h_details : 100
    property int m_details:10
    property alias  list: listm
    id: page
    width: 400; height: 240
    color: "black"
//    Image {
//        anchors { right: flick.right; top: flick.top }
//        source: "content/pics/moreUp.png"
//        opacity: flick.atYBeginning ? 0 : 1
//    }

//    Image {
//        anchors { right: flick.right; bottom: flick.bottom }
//        source: "content/pics/moreDown.png"
//        opacity: flick.atYEnd ? 0 : 1
//    }
    // Delegate for the recipes.  This delegate has two modes:
    // 1. List mode (default), which just shows the picture and title of the recipe.
    // 2. Details mode, which also shows the ingredients and method.
    Component {
        id: recipeDelegate


        Item {
            id: recipe

            property int angle: 0
            transform: Rotation {
                id: rotation
                axis {x:0; y:1; z:1}
                angle: recipe.angle
            }
            // Create a property to contain the visibility of the details.
            // We can bind multiple element's opacity to this one property,
            // rather than having a "PropertyChanges" line for each element we
            // want to fade.
            property real detailsOpacity : 0

            width: listView.width
            height: 100

            // A simple rounded rectangle for the background
            Rectangle {
                id: background
                x: 2; y: 2; width: parent.width - x*2; height: parent.height - y*2
                color: Qt.rgba(255,255,255,0.7)
                border.color: "orange"
                radius: 5
            }

            // This mouse region covers the entire delegate.
            // When clicked it changes mode to 'Details'.  If we are already
            // in Details mode, then no change will happen.
            MouseArea {
                anchors.fill: parent
                onClicked: recipe.state = 'Details';
            }

            // Lay out the page: picture, title and ingredients at the top, and method at the
            // bottom.  Note that elements that should not be visible in the list
            // mode have their opacity set to recipe.detailsOpacity.
            Row {
                id: topLayout
                x: 10; y: 10; height: recipeImage.height; width: page.w_details
                spacing: 10
                Image {
                    id: recipeImage
                    width: 100; height: recipe.height-10*2
                    source: picture
                    Text {
                        text: title
                        font.bold: true; font.pointSize: 16
                        anchors.horizontalCenter: parent.horizontalCenter
                    }
                }
                Column {
                    width: background.width - recipeImage.width - 20; height: recipeImage.height
                    spacing: 5
//                    Text {
//                        text: "Ingredients"
//                        font.pointSize: 12; font.bold: true
//                        opacity: recipe.detailsOpacity
//                    }

//                    Text {
//                        text: ingredients
//                        wrapMode: Text.WordWrap
//                        width: parent.width
//                        opacity: recipe.detailsOpacity
//                    }
               }
            }

            Item {
                id: details
                x: 10; width: page.w_details - 20
                anchors { top: topLayout.bottom; topMargin: 10; bottom: parent.bottom; bottomMargin: 10 }
                opacity: recipe.detailsOpacity

                Text {
                    id: methodTitle
                    anchors.top: parent.top
                    text: "Method"
                    font.pointSize: 12; font.bold: true
                }

                Flickable {
                    id: flick
                    width: parent.width
                    anchors { top: methodTitle.bottom; bottom: parent.bottom }
                    contentHeight: methodText.height
                    clip: true

                    Text { id: methodText; text: method; wrapMode: Text.WordWrap; width: details.width }
                }

                Image {
                    anchors { right: flick.right; top: flick.top }
                    source: "content/pics/moreUp.png"
                    opacity: flick.atYBeginning ? 0 : 1
                }

                Image {
                    anchors { right: flick.right; bottom: flick.bottom }
                    source: "content/pics/moreDown.png"
                    opacity: flick.atYEnd ? 0 : 1
                }

            }

            // A button to close the detailed view, i.e. set the state back to default ('').
            TextButton {
                y: 10
                anchors { right: background.right; rightMargin: 10 }
                opacity: recipe.detailsOpacity
                text: "Close"

                onClicked: recipe.state = '';
            }

            states: State {
                name: "Details"

                PropertyChanges {target: background;width: page.w_details-x*2; height: page.h_details-y*2 }
                PropertyChanges { target: background; color: Qt.rgba(255,255,255,0.7); }

                PropertyChanges { target: recipeImage; width: 130; height: 130 } // Make picture bigger
              //  PropertyChanges { target: recipe; y:recipe.y-100} // Make details visible

                PropertyChanges { target: recipe; detailsOpacity: 1; x: -(page.w_details-page.width);focus:truel;} // Make details visible
                PropertyChanges { target: recipe; height:  page.h_details } // Fill the entire list area with the detailed view
              //  PropertyChanges { target: recipe; height: listView.width } // Fill the entire list area with the detailed view
                PropertyChanges { target: num; visible:false  }


                // Move the list so that this item is at the top.
                PropertyChanges { target: recipe.ListView.view; explicit: false;contentY: recipe.y+100 ; }// ;y:-m_details  }
             //   PropertyChanges { target: page; y:-100 }// ;y:-m_details  }

                // Disallow flicking while we're in detailed view
                PropertyChanges { target: recipe.ListView.view; interactive: false }
            }

            transitions: Transition {
                // Make the state changes smooth
                ParallelAnimation {

                    ColorAnimation { property: "color"; duration: 500 }
                    NumberAnimation { duration: 300; properties: "detailsOpacity,x,contentY,height,width,visible" }
                    NumberAnimation { duration: 10; properties: "y,x,z" }
                }
            }
        }
    }

    // The actual list
    ListView {
        id: listView
       // anchors.fill: parent
        anchors {left:parent.left; right:parent.right ;top:parent.top; bottom: parent.bottom;topMargin:100;bottomMargin: 100}
        model: listm
        delegate: recipeDelegate
//        Image {
//            id:up
//            anchors { horizontalCenter: listView.horizontalCenter; top: listView.top ;topMargin: page.m_details }
//            source: "content/pics/moreUp.png"
//            opacity: listView.atYBeginning ? 0 : 1
//            scale: 5
//        }
//        Image {
//            id:down
//            anchors { horizontalCenter: listView.horizontalCenter;  bottom: listView.bottom;bottomMargin: page.m_details }
//            source: "content/pics/moreDown.png"
//            opacity: listView.atYEnd ? 0 : 1
//            scale: 5
//        }
    }
   DigitalDisplay{
            id: num
            width: parent.width
            height: 40
            txt:  listView.count.toString();
            anchors { horizontalCenter: listView.horizontalCenter;  }
    }

    Timer {
        id: timer
        interval: 3000

        onOut: {
           // console.log( "Timer fired!" );
            listm.insert(0,{title:listView.count.toString(), picture: "content/pics/pancakes.jpg", ingredients: "Easing.Linear", method:  "DarkRed" })
        }

    }
    ListModel {
        id:listm
        ListElement {
            title: "Pancakes"
            picture: "content/pics/pancakes.jpg"
            ingredients: "<html>
                           <ul>
                            <li> 1 cup (150g) self-raising flour
                            <li> 1 tbs caster sugar
                            <li> 3/4 cup (185ml) milk
                            <li> 1 egg
                           </ul>
                          </html>"
            method: "<html>
                      <ol>
                       <li> Sift flour and sugar together into a bowl. Add a pinch of salt.
                       <li> Beat milk and egg together, then add to dry ingredients. Beat until smooth.
                       <li> Pour mixture into a pan on medium heat and cook until bubbles appear on the surface.
                       <li> Turn over and cook other side until golden.
                      </ol>
                     </html>"
        }
        ListElement {
            title: "Fruit Salad"
            picture: "content/pics/fruit-salad.jpg"
            ingredients: "* Seasonal Fruit"
            method: "* Chop fruit and place in a bowl."
        }
        ListElement {
            title: "Vegetable Soup"
            picture: "content/pics/vegetable-soup.jpg"
            ingredients: "<html>
                           <ul>
                            <li> 1 onion
                            <li> 1 turnip
                            <li> 1 potato
                            <li> 1 carrot
                            <li> 1 head of celery
                            <li> 1 1/2 litres of water
                           </ul>
                          </html>"
            method: "<html>
                      <ol>
                       <li> Chop vegetables.
                       <li> Boil in water until vegetables soften.
                       <li> Season with salt and pepper to taste.
                      </ol>
                     </html>"
        }
        ListElement {
            title: "Hamburger"
            picture: "content/pics/hamburger.jpg"
            ingredients: "<html>
                           <ul>
                            <li> 500g minced beef
                            <li> Seasoning
                            <li> lettuce, tomato, onion, cheese
                            <li> 1 hamburger bun for each burger
                           </ul>
                          </html>"
            method: "<html>
                      <ol>
                       <li> Mix the beef, together with seasoning, in a food processor.
                       <li> Shape the beef into burgers.
                       <li> Grill the burgers for about 5 mins on each side (until cooked through)
                       <li> Serve each burger on a bun with ketchup, cheese, lettuce, tomato and onion.
                      </ol>
                     </html>"
        }
        ListElement {
            title: "Lemonade"
            picture: "content/pics/lemonade.jpg"
            ingredients: "<html>
                           <ul>
                            <li> 1 cup Lemon Juice
                            <li> 1 cup Sugar
                            <li> 6 Cups of Water (2 cups warm water, 4 cups cold water)
                           </ul>
                          </html>"
            method: "<html>
                      <ol>
                       <li> Pour 2 cups of warm water into a pitcher and stir in sugar until it dissolves.
                       <li> Pour in lemon juice, stir again, and add 4 cups of cold water.
                       <li> Chill or serve over ice cubes.
                      </ol>
                     </html>"
        }
    }

}
